// 获取文章列表
let params = {
    pagenum: 1, //页码值
    pagesize: 2, // 每页显示多少条数据
    cate_id: '', // 文章分类的id  默认是空
    state: '' // 文章的状态
}
let total = 0

function render() {
    getArticleListAPI(params, res => {
        if (res.status === 0) {
            $(".layui-table tbody").empty()
            res.data.forEach(obj => {
                let theTr = `<tr>
                <td>${obj.title}</td>
                <td>${obj.cate_name}</td>
                <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:SS')}</td>
                <td>${obj.state}</td>
                <th>
                <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                    </th>
            </tr>`
                $(".layui-table tbody").append(theTr);
            })
            total = res.total
            setPage()
        }
    })
}
render()

function getCates() {
    getArticleAPI(res => {
        if (res.status === 0) {
            // 默认一进来要添加一个option默认选项 --- 请选择分类
            $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默认获取所有分类
            res.data.forEach(obj => {
                const theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
                $("select[name=category]").append(theOption);
            })
            // 等循环结束之后, 再执行form.render() 手动的去刷新了一下当前的select框的数据
            layui.form.render('select', 'category')
        }
    })
}
getCates()

$('form').on('submit', function (e) {
    e.preventDefault()
    // 1. 分别获取文章的分类和状态
    // 2. 修改params参数里的cate_id 和 state 
    // 3. 发送请求, 渲染页面
    const cate_id = $('select[name=category]').val()
    const state = $('select[name=state]').val()

    // 修改查询参数
    params.cate_id = cate_id
    params.state = state

    render()
})

function setPage() {
    layui.use('laypage', function () {
        var laypage = layui.laypage;

        laypage.render({
            elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: params.pagesize, // 每页显示的条数
            limits: [2, 3, 5, 10, 20], // 每页条数的选择项
            curr: location.hash.replace('#!fenye=', ''), //获取起始页
            hash: 'fenye', //自定义hash值
            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
            jump: function (obj, first) {
                // console.log(obj.curr) // 得到当前页, 以便向服务端请求对应页的数据
                // console.log(obj.limit) // 得到每页显示的条数

                // 首次不执行
                if (!first) {
                    params.pagenum = obj.curr
                    params.pagesize = obj.limit
                    render()
                }
            }
        });
    });
}